iT邦幫忙

2021 iThome 鐵人賽

DAY 1
0
自我挑戰組

JavaScript 核心觀念系列 第 1

【Day01】JavaScript 是如何運行的

  • 分享至 

  • xImage
  •  

程式語言的運行過程

在知道如何運行之前,必須先了解程式語言是如何被運行的。

程式語言依照運行方式可分為兩種:

  1. 編譯式語言(Compiled language):

    • 運行過程:需經由編譯器將原始碼進行編譯,生成代碼後,才能運行。
    • 優點:在編譯會先除錯,因此效能較好。
    • 相關語言:C語言、C#...
  2. 直譯式語言(Interpreted language):

    • 運行過程:需經由直譯器將原始碼進行編譯,生成代碼後,才能運行。
    • 優點:彈性高,不須預先定義型別。
    • 相關語言:Python、JavaScript、PHP...

以圖形呈現的話:

JavaScript 直譯轉換的過程

先附上 JavaScript 直譯轉換的流程圖,詳細內容後面說明:

以下範例是在編譯網站中進行操作。

  1. 語法基本單元化(Tokenizing):會將 JS 中每一個詞彙解析出來
    解說:

    var 解析為 Keyword,代表關鍵字
    ming 解析為 Identifier,此時電腦還不知道是變數,只是將值取出來
    = 解析為 Punctuator,表示為標點符號
    '小明' 解析為 String,表示字串
    ; 解析為 Punctuator,表示為標點符號

  1. 抽象結構樹(Abstract Syntax Tree):定義出程式碼的結構樹
    解說:

    VariableDeclaration 為定義變數
    name 為變數名稱
    kind 為宣告種類,種類有:letconstvar
    value 為賦予的值

本範例為定義變數,因此會有 VariableDeclaration

var 改為 let 後,kind 的值就變成 let

此時將 let 拿掉的話,會有不同的結果,

AssignmentExpression 為表達式,代表將 '小明' 賦予到 ming 這個變數中

  1. 代碼生成:生成電腦看得懂的語言,其結構跟結構樹很像。

以上就是今天的內容了,明天來說明何謂 LHS 與 RHS


下一篇
【Day02】錯誤範例的 RHS 和 LHS
系列文
JavaScript 核心觀念30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言